<template>
	<view class="elevator" @click="toDetail" :style="{ paddingTop: elevator.index === 0 ? '0px' : '30rpx' }">
		<view class="top">
			<view class="name" :style="{ color: elevator.status === 4||elevator.status==7 ? '#999' : '#333' }">
				{{ elevator.elevatorAddress }}
				<text class="tag red" v-if="elevator.elevatorIsStop != 1">停梯</text>
			</view>
			<view class="handle" v-if="showTurnBtn" @click.stop="handleDelay(elevator, elevator.typeStatus, elevator.planId)">更多操作</view>
			<view class="score" v-if="elevator.scoreStatus==1">
				{{'工单评分:'+elevator.score+'分'}}
			</view>
		</view>
		<view class="detail" :style="{ color: elevator.status === 4 ||elevator.status === 7? '#999' : '#666' }">
			<view class="label">{{ elevator.typeStatus === 1 ? '保养:' : elevator.typeStatus==2?'维修:':'配件:' }}</view>
			
			<view class="telName">
				<view v-if="elevator.typeStatus === 1">{{ elevator.planCheckName }}</view>
				<view v-if="elevator.typeStatus === 4">更换配件</view>
				<view v-if="elevator.typeStatus === 2" v-for="(v, idx) in elevator.problemItemNames" :key="idx">{{ v }}</view>
			</view>
		</view>
		<view class="partsLabel" v-if="elevator.typeStatus === 4">
			<text v-if="elevator.partsName" >{{restName(elevator.partsName) || "--"}}</text>
			<text v-if="elevator.partsNum">数量:{{elevator.partsNum || "--"}}</text>
		</view>
		<view class="detail_bottom">
			<view class="detail_bottom_left">
				<image v-if="elevator.typeStatus == 1" :src="statusMap[elevator.status.toString()].icon"></image>
				<image v-if="elevator.typeStatus == 4" :src="partMap[elevator.status.toString()].icon"></image>
				<image v-if="elevator.typeStatus == 2" :src="repairStatusMap[elevator.status.toString()].icon"></image>
				<view v-if="elevator.typeStatus == 1" class="status" :style="{ color: statusMap[elevator.status.toString()].color }">{{ elevator.statusName }}</view>
				<view v-if="elevator.typeStatus == 2" class="status" :style="{ color: repairStatusMap[elevator.status.toString()].color }">{{ elevator.statusName }}</view>
				<view v-if="elevator.typeStatus == 4" class="status" :style="{ color: partMap[elevator.status.toString()].color }">{{ elevator.statusName }}</view>
				
				<view class="error red" v-if="elevator.overdueName&&elevator.typeStatus==1">{{ elevator.overdueName || '' }}</view>
				<view class="error red" v-if="elevator.isDeferred === 1">延期保养</view>
				<view class="error yellow" v-if="elevator.workMinuteName !== null && elevator.typeStatus === 1">{{ elevator.workMinuteName }}</view>
			</view>
			<view class="menberName">
				<view
					v-for="(e, index) in elevator.signUsers"
					:key="index"
					:class="['menber']"
					:style="{ background: !e.isPlanStatus ? '#b9b9b9' : userinfo.nick_name === e.userName ? '#0091ff' : '#00C6C0' }"
				>
					{{ e.userName.length > 2 ? e.userName.slice(-2) : e.userName }}
				</view>
			</view>
		</view>
		<!-- 延期保养对话框start -->
		<uni-popup ref="deferredPopup">
			<view class="popup">
				<view class="title">延期保养</view>
				<view class="content">
					<view>此任务将推迟到</view>
					<view class="delay_date">
						<text>{{ tomorrowDate + '(明天)' }}</text>
						执行
					</view>
					<view class="delay_detail">
						<view>{{ elevator.buildingName + elevator.elevatorAddress }}</view>
						<view>{{ contentList.join(',').replace(/,/g, '+') }}</view>
					</view>
				</view>
				<view class="bottom">
					<view @click="$refs.deferredPopup.close()">取消</view>
					<view class="comfire" @click="rescueComfire">确认</view>
				</view>
			</view>
		</uni-popup>
		<!-- 延期保养对话框end -->
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { formatTime } from '@/utils/utils.js';
import { setRescue } from '@/apis/rescue.js';
import { getContent } from '@/apis/index.js';
export default {
	props: {
		elevator: {
			type: Object
		}
	},
	data() {
		return {
			formatTime: formatTime,
			statusMap: {
				1: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				2: {
					text: '进行中',
					color: '#0091ff',
					icon: '/static/images/index/2.png'
				},
				3: {
					text: '提交任务',
					color: '#F7B500',
					icon: '/static/images/index/3.png'
				},
				4: {
					text: '签字完成',
					color: '#999',
					icon: '/static/images/index/4.png'
				}
			},

			repairStatusMap: {
				1: {
					text: '待处理',
					color: '#F7B500',
					icon: '/static/images/index/3.png'
				},
				2: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				3: {
					text: '进行中',
					color: '#0091ff',
					icon: '/static/images/index/2.png'
				},
				4: {
					text: '已完成',
					color: '#999',
					icon: '/static/images/index/4.png'
				},
				5: {
					text: '已关闭',
					color: '#999',
					icon: '/static/images/index/4.png'
				},
				6: {
					text: '签字完成',
					color: '#999',
					icon: '/static/images/index/4.png'
				}
			},
			partMap:{
				1: {
					text: '待审批',
					color: '#F7B500',
					icon: '/static/images/index/3.png'
				},
				2: {
					text: '待报价',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				3: {
					text: '待发货',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				4: {
					text: '待分配',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				5: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				6: {
					text: '更换中',
					color: '#0091ff',
					icon: '/static/images/index/2.png'
				},
				7: {
					text: '已完成',
					color: '#999',
					icon: '/static/images/index/4.png'
				},
				8: {
					text: '已关闭',
					color: '#999',
					icon: '/static/images/index/4.png'
				},
				9: {
					text: '已撤回',
					color: '#999',
					icon: '/static/images/index/4.png'
				}
			},
			tomorrowDate: formatTime(new Date().getTime() + 24 * 60 * 60 * 1000),
			contentList: []
		};
	},
	computed: {
		...mapState('user', ['userinfo']),
		showTurnBtn() {
			let flag = false;
			// 如果是待处理
			if (this.elevator.status === 1) {
				// console.log(this.elevator.status)
				if ((this.elevator.date.substring(0, 10) === formatTime(new Date()) && this.elevator.isDeferred !== 1) || this.elevator.typeStatus === 2) {
					flag = true;
				}
			}
			return flag;
		}
	},
	methods: {
		toDetail() {
			console.log('查看工单详情', this.elevator);
			if (this.elevator.typeStatus == 2) {
				// 维修详情
				uni.navigateTo({
					url: '/subpages/repair/repariDetail?planId=' + this.elevator.planId + '&elevatorId=' + this.elevator.elevatorId
				});
			} 
			// 配件更换
			if (this.elevator.typeStatus == 4) {
				uni.navigateTo({
					url:`/subpages/workOrders/partOrder?planId=${this.elevator.planId}&elevatorId=${this.elevator.elevatorId}`
				});
			}
			if (this.elevator.typeStatus == 1) {
				// 保养详情
				uni.navigateTo({
					url: `/subpages/workOrders/detail?planId=${this.elevator.planId}&elevatorId=${this.elevator.elevatorId}`
				});
			}

			this.$emit('toDetail', this.elevator);
		},
		// 延迟保养
		handleDelay(item, type, planId) {
			console.log(item);
			uni.showActionSheet({
				itemList: [type == 1 ? '延期保养' : '转单'],
				success: async res => {
					if (res.tapIndex == 0) {
						this.contentList = await this.fetchTemContent();
						this.$refs.deferredPopup.open();
					}
				},
				fail(res) {}
			});
		},
		rescueComfire() {
			console.log(this.elevator.planId);
			setRescue({ id: this.elevator.planId, isDeferred: 1 }).then(res => {
				// console.log(res,'延期保养')
				if (res) {
					uni.showToast({
						title: '延期成功',
						icon: 'none'
					});
					this.$refs.deferredPopup.close();
					this.$emit('update');
				}
			});
		},
		fetchTemContent() {
			return new Promise(resolve => {
				getContent({ planId: this.elevator.planId })
					.then(res => {
						// console.log(res,'res的值')
						resolve(res.data);
					})
					.catch(resolve => {
						resolve([]);
					});
			});
		},
		restName(name) {
			let str = '';
			if (name) {
				str = name.split('&amp;&amp;');
			}
			return str[str.length - 1] || '';
		}
	}
};
</script>

<style lang="scss" scoped>
.elevator {
	padding-bottom: 26rpx;
	border-bottom: 2rpx solid #eee;
	// padding-top: 30rpx;
	.top {
		display: flex;
		justify-content: space-between;
		// align-items: center;
		.handle {
			display: flex;
			// align-items: center;
			// padding: 0 20rpx;
			color: #999999;
			// flex: 1;
			justify-content: center;
			// border: 2rpx #d8d8d8 solid;
			padding: 2rpx 8rpx;
			font-size: 24rpx;
			border-radius: 8rpx;
			height: 31rpx;
			margin-top: 5rpx;
			margin-right: 10rpx;
		}
		.score{
			color: #999;
			font-size: 24rpx;
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: flex-end;
			height: 48rpx;
		}
	}
	.name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		width: 466rpx;
	}

	.detail {
		width: 530rpx;
		font-size: 26rpx;
		color: #666666;
		padding: 14rpx 0;
		display: flex;
		.label {
			// width: 80rpx;
			display: flex;
			align-items: center;
		}
		.telName {
			display: flex;
			flex-wrap: wrap;
			view {
				font-size: 24rpx;
				border: 2rpx solid #cccccc;
				border-radius: 20rpx;
				margin: 0 12rpx;
				padding: 2rpx 8rpx;
				margin-top: 6rpx;
			}
		}

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
	.partsLabel{
		text{
			display: inline-block;
			background-color: #dcf0ff;
			padding: 4rpx 8rpx;
			margin-right: 20rpx;
			font-size: 24rpx;
			color: #0091ff;
			border-radius: 4rpx;
		}
	}
	.detail_bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 4rpx;
		}
		&_left {
			display: flex;
			font-size: 26rpx;
			align-items: center;
			width: 400rpx;
			.status {
				color: #16bf99;
			}
			.error {
				margin-left: 12rpx;
				padding: 0rpx 8rpx;
				font-size: 24rpx;

				border-radius: 4rpx;
			}
			.red {
				color: #e02020;
				background: #ffe3e3;
			}
			.yellow {
				color: #fa6400;
				background: #ffefe3;
			}
		}
	}
	.menberName {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: flex-end;
		flex-wrap: wrap;
		.menber {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20rpx;
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			background-color: #0091ff;
			color: #fff;
			margin-left: 4rpx;
		}
		:nth-child(2n) {
			// background-color: #00c6c0;
		}

		.finish {
			// background: #b9b9b9;
		}
	}
	.tag {
		font-size: 24rpx;
		padding: 0rpx 9rpx;
		font-weight: normal;
		margin-left: 12rpx;
		border-radius: 4rpx;
		line-height: 32rpx;
		white-space: nowrap;
		margin-bottom: 2rpx;
	}
	.red {
		color: #e02020;
		border: 1rpx solid #e02020;
	}
	.popup {
		padding: 24rpx 28rpx 0 28rpx;
		box-sizing: border-box;
		background-color: #fff;
		width: 506rpx;
		border-radius: 16rpx;
		.title {
			color: #333;
			font-size: 32rpx;
			font-weight: 500;
			padding-bottom: 20rpx;
		}
		.content {
			text-align: center;
			color: #333;
			margin-bottom: 38rpx;
			.delay_date {
				margin-bottom: 16rpx;
				font-size: 28rpx;
				text {
					color: #0091ff;
				}
			}
			.delay_detail {
				color: #999;
				font-size: 24rpx;
			}
		}
		.bottom {
			display: flex;
			border-top: 2rpx solid #f5f5f5;
			height: 76rpx;

			view {
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #999;
			}
			.comfire {
				color: #0091ff;
				border-left: 2rpx solid #f5f5f5;
			}
		}
	}
}
</style>
